<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>异清轩博客</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/nprogress.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
<link rel="shortcut icon" href="images/icon/favicon.ico">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/nprogress.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<!--[if gte IE 9]>
  <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="js/html5shiv.min.js" type="text/javascript"></script>
  <script src="js/respond.min.js" type="text/javascript"></script>
  <script src="js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 9]>
  <script>window.location.href='upgrade-browser.html';</script>
<![endif]-->
  <style>
    html,body,#app{
      height: 100%;
      overflow: hidden;
    }
    #app{
      overflow: auto;
    }
  </style>
</head>
<body class="user-select">
<div id="app" v-infinite-scroll="queryNew"
      :infinite-scroll-delay="200" :infinite-scroll-distance="200">
  <mybody>
    <section class="container">
      <div class="content-wrap">
        <div class="content">
          <div class="jumbotron">
            <h1>欢迎访问异清轩博客</h1>
            <p>在这里可以看到前端技术，后端程序，网站内容管理系统等文章，还有我的程序人生！</p>
          </div>
          <div id="focusslide" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#focusslide" data-slide-to="0" class="active"></li>
              <li data-target="#focusslide" data-slide-to="1"></li>
              <li data-target="#focusslide" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
              <div class="item active"> <a href="" target="_blank"><img src="images/banner/banner_01.jpg" alt="" class="img-responsive"></a>
                <!--<div class="carousel-caption"> </div>-->
              </div>
              <div class="item"> <a href="" target="_blank"><img src="images/banner/banner_02.jpg" alt="" class="img-responsive"></a>
                <!--<div class="carousel-caption"> </div>-->
              </div>
              <div class="item"> <a href="" target="_blank"><img src="images/banner/banner_03.jpg" alt="" class="img-responsive"></a>
                <!--<div class="carousel-caption"> </div>-->
              </div>
            </div>
            <a class="left carousel-control" href="#focusslide" role="button" data-slide="prev" rel="nofollow"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">上一个</span> </a> <a class="right carousel-control" href="#focusslide" role="button" data-slide="next" rel="nofollow"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">下一个</span> </a> </div>
          <article class="excerpt-minic excerpt-minic-index">
            <h2><span class="red">【今日推荐】</span><a href="" title="">从下载看我们该如何做事</a></h2>
            <p class="note">一次我下载几部电影，发现如果同时下载多部要等上几个小时，然后我把最想看的做个先后排序，去设置同时只能下载一部，结果是不到一杯茶功夫我就能看到最想看的电影。 这就像我们一段时间内想干成很多事情，是同时干还是有选择有顺序的干，结果很不一样。同时...</p>
          </article>
          <div class="title">
            <h3>最新发布</h3>
<!--            <div class="more">-->
<!--              <a href="">PHP</a>-->
<!--              <a href="">JavaScript</a>-->
<!--              <a href="">EmpireCMS</a>-->
<!--              <a href="">Apache</a>-->
<!--              <a href="">MySQL</a>-->
<!--            </div>-->
            <labels class="more" v-slot="slotProp">
                <a v-for=" i in 5" href=""
                   @click.prevent="where.label=slotProp.tags[i-1].name; queryNew(true)">
                  {{slotProp.tags[i-1].name}}
                </a>
            </labels>

          </div>
          <article v-for="a in news" class="excerpt excerpt-1">
            <a class="focus" :href="'article.html?id='+a.id" title="">
            <img class="thumb" data-original="images/excerpt.jpg" :src=" a.titleImgs || 'images/excerpt.jpg'" alt=""></a>
            <header><a class="cat" href="program">{{a.category.name}}<i></i></a>
              <h2><a href="article.html" title="">{{a.title}}</a></h2>
            </header>
            <p class="meta">
              <time class="time"><i class="glyphicon glyphicon-time"></i> {{a.createTime}}</time>
              <span class="views">
                <i class="glyphicon glyphicon-eye-open"></i> 共{{a.readCnt}}人围观</span> <a class="comment" href="article.html#comment">
                <i class="glyphicon glyphicon-comment"></i> 共{{a.agreeCnt}}人点赞</a></p>
            <p class="note"></p>
            <div class="hideDiv" style="display: none" v-html="a.content"></div>
          </article>
        </div>
      </div>
      <aside class="sidebar">
        <div class="fixed">
          <div class="widget widget-tabs">
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" class="active"><a href="#notice" aria-controls="notice" role="tab" data-toggle="tab">网站公告</a></li>
              <li role="presentation"><a href="#centre" aria-controls="centre" role="tab" data-toggle="tab">会员中心</a></li>
              <li role="presentation"><a href="#contact" aria-controls="contact" role="tab" data-toggle="tab">联系站长</a></li>
            </ul>
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane notice active" id="notice">
                <ul>
                  <li>
                    <time datetime="2016-01-04">01-04</time>
                    <a href="" target="_blank">欢迎访问异清轩博客</a></li>
                  <li>
                    <time datetime="2016-01-04">01-04</time>
                    <a target="_blank" href="">在这里可以看到前端技术，后端程序，网站内容管理系统等文章，还有我的程序人生！</a></li>
                  <li>
                    <time datetime="2016-01-04">01-04</time>
                    <a target="_blank" href="">在这个小工具中最多可以调用五条</a></li>
                </ul>
              </div>
              <div role="tabpanel" class="tab-pane centre" id="centre">
                <h4>需要登录才能进入会员中心</h4>
                <p> <a data-toggle="modal" data-target="#loginModal" class="btn btn-primary">立即登录</a> <a href="javascript:;" class="btn btn-default">现在注册</a> </p>
              </div>
              <div role="tabpanel" class="tab-pane contact" id="contact">
                <h2>Email:<br />
                  <a href="mailto:admin@ylsat.com" data-toggle="tooltip" data-placement="bottom" title="admin@ylsat.com">admin@ylsat.com</a></h2>
              </div>
            </div>
          </div>
          <div class="widget widget_search">
            <form class="navbar-form" action="/Search" method="post">
              <div class="input-group">
                <input v-model="where.title" type="text" name="keyword" class="form-control" size="35" placeholder="请输入关键字" maxlength="15" autocomplete="off">
                <span class="input-group-btn">
            <button @click.prevent="queryNew(true)" class="btn btn-default btn-search" name="search" type="submit">搜索</button>
            </span> </div>
            </form>
          </div>
        </div>
        <div class="widget widget_sentence">
          <h3>每日一句</h3>
          <div class="widget-sentence-content">
            <h4>2016年01月05日星期二</h4>
            <p>Do not let what you cannot do interfere with what you can do.<br />
              别让你不能做的事妨碍到你能做的事。（John Wooden）</p>
          </div>
        </div>
        <div class="widget widget_hot">
          <h3>热门文章</h3>
          <ul>
            <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg" src="images/excerpt.jpg" alt=""></span><span class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
            <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg" src="images/excerpt.jpg" alt=""></span><span class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
            <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg" src="images/excerpt.jpg" alt=""></span><span class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
            <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg" src="images/excerpt.jpg" alt=""></span><span class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
            <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg" src="images/excerpt.jpg" alt=""></span><span class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
          </ul>
        </div>
      </aside>
    </section>
  </mybody>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/blog.js"></script>
<script src="js/login.js"></script>
<script>
  var v = new Vue({
    el:"#app",
    data:{
      news:[],
      newsPage:1,
      where: {
        label:"",
        title:""
      }
    },
    created(){
      this.queryNew();
    },
    methods:{
      queryNew(reQuery){
        // 执行搜索查询, 清空之前的记录
        if(reQuery){
          this.newsPage = 1;
          this.news = []
        }
        if(this.newsPage==-1){
          return;
        }
        axios.get("blog/article/queryNew",{
          params:{
            page: this.newsPage++,
            size: 5,
            label: this.where.label,
            title: this.where.title
          }
        }).then(res=>{
          // 如果没有查到数据, 就不再滚动加载
          if(res.data.records.length==0){
            this.newsPage = -1;
            return;
          }
          // 合并结果, 追加数据
          this.news = this.news.concat(res.data.records);
          this.$nextTick(()=>{
            // $nextTick 下一次渲染完成之后, 设置回调函数
            let divs = document.querySelectorAll(".hideDiv");
            for (let div of divs) {
              let text = div.innerText.substring(0,50);
              let p = div.previousElementSibling;
              text = text.replaceAll(/\s/gm, '');
              p.innerText = text + "...";
            }
          });
        })
      }
    }

  })
</script>
<!--<script src="js/bootstrap.min.js"></script> -->
<!--<script src="js/jquery.ias.js"></script> -->
<!--<script src="js/scripts.js"></script>-->
</body>
</html>